<style scoped>
.gap {
  margin: 5px;
}

.list-item {
  text-align: center;
}

  .list img {
    margin: 20px;
    width: 30%;
  }

.lists img {
  margin: 20px;
  width: 29.2%;
}

</style>
<template>
  <div>
    <el-row v-if="isMenu()">
      <el-col :xs="12" :sm="12" :md="12" :lg="lgColSize()">
        <router-link :to="{name: 'lawyers-fee-kits'}">
          <div class="ivu-mt gap list-item list">
            <el-card :bordered="false">
              <img src="~@/images/calculator.svg" alt="cover">
              <div class="card-menu-text">{{$t('message.term.lawyer_fees_level_calculator')}}</div>
            </el-card>
          </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="lgColSize()">
        <router-link :to="{name: 'legal-costs-kits'}">
          <div class="ivu-mt gap list-item list">
            <el-card :bordered="false">
              <img src="~@/images/yiche_price.svg" alt="cover">
              <div class="card-menu-text">{{$t('message.term.legal_costs_calculator')}}</div>
            </el-card>
          </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="lgColSize()">
        <router-link :to="{name: 'day-kits'}">
          <div class="ivu-mt gap list-item list">
            <el-card :bordered="false">
              <img src="~@/images/calendar_date.svg" alt="cover">
              <div class="card-menu-text">{{$t('message.term.date_calculator')}}</div>
            </el-card>
          </div>
        </router-link>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="lgColSize()">
        <router-link :to="{name: 'm-interbank-offered-rate-kits'}">
          <div class="ivu-mt gap list-item lists">
            <el-card :bordered="false">
              <img src="~@/images/6.svg" alt="cover">
              <div class="card-menu-text">{{$t('message.term.interbank_offered_rate_kits')}}</div>
            </el-card>
          </div>
        </router-link>
      </el-col>
    </el-row>
    <div v-if="!isMenu()">
      <router-view />
    </div>
  </div>
</template>
<script>
import { API } from '@/customized/http/api';
import Util from '@/customized/util/utils';
export default {
  components: {

  },
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(() => {

    });
  },
  watch: {
    $route(to) {

    }
  },
  computed: {

  },
  methods: {
    lgColSize() {
        return 12;
    },
    isMenu() {
      return this.$route.matched.length === 2;
    },
    toFinesForOverdueReturningKitsPage() {
        return {name: 'fines-for-overdue-returning-kits'};
    }
  }
}
</script>